根据udacity课程学习的笔记。

教程和文档

Google Maps JavaScript API V3 Reference

1. 首先需要在控制台创建一个项目。

2. 然后启用API。

[Google Maps JavaScript API](https://console.developers.google.com/apis/library/maps-backend.googleapis.com)



[Google Maps Roads API][4]
[Google Static Maps API][5]
[Google Street View Image API][6]
[Google Places API Web Service][7]
[Google Maps Geocoding API][8]
[Google Maps Geolocation API][9]
[Google Maps Directions API][10]
[Google Maps Distance Matrix API][11]
[Google Maps Elevation API][12]
[Google Maps Time Zone API][13]

3. 创建凭据

创建 API 密钥，在您的应用中使用此密钥的方法是：使用 key=API_KEY 参数传递此密钥。

1
2
3
4
<!-- 用于异步加载API -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=填写api密钥&v=3&callback=initMap">
</script>

4. 创建地图

a lat long literal经纬度字面量

获取特定位置的坐标

1
2
3
4
5
6
7
8
9
10
11
var map;
//加载地图
function initMap() {
  // Constructor creates a new map - only center and zoom are required.
  map = new google.maps.Map(document.getElementById('map'), {
    //中心 纬度 经度
    center: {lat: 30.317655, lng: 120.343745},
    //缩放值 越高越详细
    zoom: 13
  });
}

5. 标记Marker

标记用来标识地图上的位置。
文档

1
2
3
4
5
6
7
8
//创建寝室标识
var dorm  ={lat: 30.317655, lng: 120.343745};
var marker = new google.maps.Marker({
  //放置位置
  position: dorm,
  map: map,
  title: 'My Dorm'
});

6. 信息窗口InfoWindow

在地图上方给定位置的弹出窗口中显示内容（通常为文本或图像）。
文档

1
2
3
4
5
6
7
8
9
//创建信息窗口
var infowindow = new google.maps.InfoWindow({
  content: 'this is a infowindow'
});
//因为窗口不会自动打开，所以在事件监听器中调用方法
marker.addListener('click',function() {
  //传入窗口打开的地图和固定它的标记(后者可换为位置属性)
  infowindow.open(map,marker);
});